<template>
  <div class="app-container">
    <el-form :model="form" ref="form" v-show="showSearch" label-width="100px">
      <div style="margin-top: -40px;">
        <div style="font-size: 20px; margin-bottom: 20px;">基本信息
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称" width="400px">
              <span>{{ form.productName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品分类" width="400px">
              <span>{{ form.categoryName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品产地" width="400px">
              <span>{{ form.productPlaceProvinceName }}> {{ form.productPlaceCityName }}>
                {{ form.productPlaceAreaName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商" width="400px">
              <span>{{ supplierDataName }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="商品标签" width="400px">
              <span>{{ form.tags }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品单位" width="400px">
              <span>{{ form.unitName }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="商品品牌" width="400px">
              <span>{{ form.brandName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品重量" width="400px">
              <span>{{ form.productWeight }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="商品编码" width="400px">
              <span>{{ form.productNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品条码" width="400px">
              <span>{{ form.productBarcode }}</span>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="商品卖点" width="400px">
              <span>{{ form.productSellingPoints }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分享文案" width="400px">
              <span>{{ form.shareTxt }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="预警数量" width="400px">
              <span>{{ form.warningNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="划线价" width="400px">
              <span>{{ form.showPrice }}元</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col >
            <el-form-item label="商品轮播图片">
              <el-image :z-index="zIndex" :preview-src-list="carouselImgs" v-for="(imgm,index) in carouselImgs"
                :src="carouselImgs[index]" :key="index" style="width: 80px;height: 80px;margin-left: 10px">
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col >
            <el-form-item label="商品详情图片">
              <el-image :z-index="zIndex" :preview-src-list="detailImgs" v-for="(imgm,index) in detailImgs"
                :src="detailImgs[index]" :key="index" style="width: 80px;height: 80px;margin-left: 10px">
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="商品轮播视频">
              <video :z-index="zIndex" style="width: 80px;height: 80px;margin-left: 10px;"
                v-if="form.carouselVedio != '' && form.carouselVedio!=null" :src="form.carouselVedio "
                controls="controls">
                您的浏览器不支持视频播放
              </video>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品详情视频">
              <video :z-index="zIndex" style="width: 80px;height: 80px;margin-left: 10px"
                v-if="form.detailVedio != '' && form.detailVedio!=null" :src="form.detailVedio " controls="controls">
                您的浏览器不支持视频播放
              </video>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="商品主图片">
              <el-image :z-index="zIndex" :preview-src-list="[form.bannerImg]" :src="form.bannerImg"
                style="width: 80px;height: 80px;margin-left: 10px">
                <div slot="error" class="image-slot">
                </div>
              </el-image>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品分享图片">
              <el-image :z-index="zIndex" :preview-src-list="[form.shareImg]" :src="form.shareImg"
                style="width: 80px;height: 80px;margin-left: 10px">
                <div slot="error" class="image-slot">
                </div>
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="font-size: 20px; margin-bottom: 30px;">商品属性
          <el-row>
            <el-col :span="12">
              <el-form-item :label="propertys.specsName" v-for="propertys in form.list" :key="propertys.valuesName">
                <span>{{ propertys.valuesName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div style="font-size: 20px; margin-bottom: 30px;">规格和库存
          <div style="margin-top: 20px;" :class=" displayShow == 0 ? 'div-show':''">
            <el-table :data="infoList" stripe style="width: 100%" border>
              <el-table-column prop="stockNumber" label="库存">
              </el-table-column>
              <el-table-column prop="costPrice" label="供货价(元)">
              </el-table-column>
              <el-table-column prop="retailPrice" label="零售价(元)">
              </el-table-column>
              <el-table-column prop="tradePrice" label="批发价(元)">
              </el-table-column>
            </el-table>
          </div>
          <div style="margin-top: 20px;" :class=" displayShow == 1 ? 'div-show':''">
            <el-table :data="productList" stripe style="width: 100%;" border>
              <el-table-column prop="valueName" :label="skuName">
              </el-table-column>

              <el-table-column prop="stockNumber" label="库存">
              </el-table-column>
              <el-table-column prop="costPrice" label="供货价(元)">
              </el-table-column>
              <el-table-column prop="skuRetailPrice" label="零售价(元)">
              </el-table-column>
              <el-table-column prop="skuTradePrice" label="批发价(元)">
              </el-table-column>
              <el-table-column prop="skuNo" label="sku编号">
              </el-table-column>
              <el-table-column prop="imgCoverUrl" label="sku图片">
                <template slot-scope="scope">
                  <el-image :z-index="zIndex" v-if="scope.row.imgCoverUrl != null && scope.row.imgCoverUrl != '' "
                    slot="reference" :src="scope.row.imgCoverUrl" class="image-rows"
                    :preview-src-list="[scope.row.imgCoverUrl]">
                  </el-image>
                </template>
              </el-table-column>
            </el-table>

            <el-table :data="infoList" stripe style="width: 100%;margin-top: 20px;" border>
              <el-table-column prop="stockNumber" label="总库存">
              </el-table-column>
              <el-table-column prop="costPrice" label="供货价(元)">
              </el-table-column>
              <el-table-column prop="retailPrice" label="零售价(元)">
              </el-table-column>
              <el-table-column prop="tradePrice" label="批发价(元)">
              </el-table-column>
            </el-table>
          </div>
        </div>


      </div>
    </el-form>

  </div>
</template>

<script>
  import {
    getInfoDetail
  } from "@/api/product/info";
  import {
    getSupplierList
  } from "@/api/supplier/info";

  export default {
    data() {
      return {
        uid:null,
        zIndex: 3000,
        // 显示
        displayShow: 0,
        //供应商名称
        supplierDataName: '',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 商品sku
        productList: [],
        skuName: "",
        specsName: "",
        // 商品sku
        // 商品信息表格数据
        infoList: [],
        // 商品数据
        infoProduct: {
          stockNumber: 0,
          costPrice: "0.00",
          retailPrice: "0.00",
          tradePrice: "0.00"
        },
        // 默认数字
        activeClass: 0,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 供应商列表
        supplierUidOptions: [],
        // 预览图片
        carouselImgs: [],
        detailImgs: [],
        columns: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      };
    },
    created() {
         this.uid  = $this.$route.params && $this.$route.params.productUid;

      if(this.uid == null){
        
      }else{
        getInfoDetail(this.uid).then(response => {
          let this_ = this
          this.form = response.data;
          this.carouselImgs = this.form.carouselImgs;
          this.detailImgs = this.form.detailImgs;
          if (this.form.isSku) {
            let arr = this.form.skuSaveVo;
            for (let i = 0; i < arr.length; i++) {
              let skuObjs = {
                valueName: "",
                stockNumber: 0,
                costPrice: "0.00",
                skuRetailPrice: "0.00",
                skuTradePrice: "0.00",
                imgCoverUrl: "",
                skuNo: ""
              }
              let skuVo = arr[i];
              skuObjs.skuNo = skuVo.skuNo;
              skuObjs.stockNumber = skuVo.stockNumber;
              skuObjs.skuRetailPrice = skuVo.skuRetailPrice;
              skuObjs.skuTradePrice = skuVo.skuTradePrice
              if (skuVo.imgCoverUrl) {
                skuObjs.imgCoverUrl = skuVo.imgCoverUrl;
              }
              skuObjs.costPrice = skuVo.costPrice;
              let str = "";
              for (let a = 0; a < skuVo.data.length; a++) {
                if (i == 0) {
                  this.skuName += "," + skuVo.data[a].name;
                }
                str += "," + skuVo.data[a].value_name;
              }
              skuObjs.valueName = str.substring(1, str.legnth);
              this.skuName = this.skuName.substring(1, this.skuName.length)
              this_.productList.push(skuObjs);
              console.log(this.productList)
            }
        
            this.displayShow = 0;
          } else {
            this.displayShow = 1;
          }
          this.infoProduct.stockNumber = this.form.stockNumber;
          this.infoProduct.costPrice = this.form.costPrice;
          this.infoProduct.retailPrice = this.form.retailPrice;
          this.infoProduct.tradePrice = this.form.tradePrice;
          this.infoList.push(this.infoProduct);
          if (this.form.supplierUid) {
            getSupplierList(1).then(responses => {
              for (let i = 0; i < responses.data.length; i++) {
                let supper = responses.data[i];
                if (supper.supplierUid == this.form.supplierUid) {
                  this_.supplierDataName = supper.supplierName;
                }
              }
            });
          }
        });
      }
     
    },
    methods: {

      statusFormat(status) {
        let showStatus = "";
        if (status == "1") {
          showStatus = "销售中";
        } else {
          showStatus = "已下架"
        }
        return showStatus;
      }
    }
  };
</script>

<style scoped>
  .el-form-item {
    margin-bottom: 0;
  }

  .div-show {
    display: none;
  }
</style>
